<template>
  <!--  <div>-->
  <!--&lt;!&ndash;    <div ref="dom1" ></div>&ndash;&gt;-->
  <!--    <div ref="dom2" ></div>-->
  <!--  </div>-->
<!--  <div ref="dom" class="charts chart-bar"></div>-->
      <div >
        <div ref="dom1" style="width: 100%;height: 100%;margin: 0 auto;"></div>
        <div ref="dom2" style="width: 100%;height: 100%;margin: 0 auto;"></div>
      </div>

<!--    </div>、-->

</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: "HealthChart",
  props: {
    xdata: Array,  //x轴名称
    callQuantity: Array, //调用量
    successRate: Array,  //成功率
    failureRate: Array,  //有效率
    zoomSize: Array,   //区域缩放条的最大值
    text: String,       //标题
    subtext: String,     //子标题
    value: Object
  },
  data () {
    return {
      dom1: null,
      dom2:null,
      dom:null
    }
  },
  methods:{
    resize () {
      this.dom1.resize()
      this.dom2.resize()
      // this.dom.resize()
    },

  },
  mounted () {
    console.log(this.xdata,"xdata")
    console.log(this.callQuantity,"callQuantity")
    console.log(this.successRate,"successRate")
    console.log(this.failureRate,"failureRate")
    this.$nextTick(() => {
      let xdata = this.xdata
      let callQuantity = this.callQuantity
      let successRate = this.successRate
      let failureRate = this.failureRate
      // let legend = this.value.map(_ => _.name)
      let option1 = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor : 'rgba(255, 255, 255, 0.9)',
          borderColor : 'rgb(222, 222, 222)',
          borderRadius : 4,
          borderWidth: 1,
          textStyle : {
            color: '#666',
            decoration: 'none',
            fontSize: 12
          },
          formatter: function (params){
            return params[0].name + '<br/>'
              + params[0].seriesName + ' : ' + params[0].value+'ms';
          }
        },
        legend: {
          data: ["血压"],
          x: '40px'
        },
        dataZoom : {
          show : false,
          realtime : true,
          start : 0,
          end : 100
        },
        grid: {
          y: 80
        },
        xAxis: {
          type: 'category',
          data : xdata,
          splitLine : {
            show:false
          },
          axisTick : {
            show:false
          },
          axisLabel: { //X轴刻度配置
            interval:'auto',//0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            formatter: '{value}',
            textStyle: {
              color: '#999999',
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            axisLine:{
              show:false
            },
            splitLine : {
              show:true,
              lineStyle: {
                color: '#e5e5e5',
                type: 'dashed',
                width: 1
              }
            },
            axisTick : {
              show:false
            },
            axisLabel: {
              interval:'0',
              formatter: '{value}',
              textStyle: {
                color: '#999999',
                fontSize: 12
              }
            }
          }
        ],
        series: [
          {
            name:'血压',
            type:'line',
            data:this.failureRate,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            },
            itemStyle: {
              normal: {
                color:'#4466ee'
              }
            },
            barCategoryGap :'50%'
          }
        ]
      }
      let option2 = {
        tooltip: {
          trigger: 'axis',
          backgroundColor : 'rgba(255, 255, 255, 0.9)',
          borderColor : 'rgb(222, 222, 222)',
          borderRadius : 4,
          borderWidth: 1,
          textStyle : {
            color: '#666',
            decoration: 'none',
            fontSize: 12
          },
          formatter: function (params){
            return params[0].name + '<br/>'
              + params[0].seriesName + ' : ' + params[0].value+'' + '<br/>'
              + params[1].seriesName + ' : ' + params[1].value+'%' + '<br/>'
              + params[2].seriesName + ' : ' + params[2].value+'%';
          }
        },
        legend: {
          data: ["心率","体温","血氧饱和度"],
          x: '40px'
        },
        dataZoom : {
          show : true,
          realtime : true,
          start : 0,
          end : this.zoomSize
        },
        xAxis: {
          type: 'category',
          data : xdata,
          splitLine : {
            show:false
          },
          axisTick : {
            show:false
          },
          axisLabel: { //X轴刻度配置
            interval:'auto',//0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
            formatter: '{value}',
            textStyle: {
              color: '#999999',
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            type:'value',
            splitLine : {
              show:false
            },
            axisLine:{
              show:false
            },
            axisTick : {
              show:false
            },
            axisLabel: {
              interval:'0',
              formatter: '{value}',
              textStyle: {
                color: '#999999',
                fontSize: 12
              }
            }
          },
          {
            type: 'value',
            axisLine:{
              show:false
            },
            splitLine : {
              show:true,
              lineStyle: {
                color: '#e5e5e5',
                type: 'dashed',
                width: 1
              }
            },
            axisTick : {
              show:false
            },
            axisLabel: {
              interval:'0',
              formatter: '{value}',
              textStyle: {
                color: '#999999',
                fontSize: 12
              }
            }
          }
        ],
        series: [
          {
            name:'血氧饱和度',
            type:'bar',
            data:callQuantity,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            },

            itemStyle: {
              normal: {
                color:'#69a3ec',
                barBorderRadius:[5, 5, 0, 0]
              }
            },
            barCategoryGap :'50%'
          },
          {
            name:'心率',
            type:'line',
            yAxisIndex: 1,
            data:successRate,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            },

            itemStyle: {
              normal: {
                color:'#ee6276'
              }
            },
            barCategoryGap :'50%'
          },
          {
            name:'体温',
            type:'line',
            yAxisIndex: 1,
            data:failureRate,
            markPoint : {
              data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
              ]
            },

            itemStyle: {
              normal: {
                color:'#9587dc'
              }
            },
            barCategoryGap :'50%'
          }
        ]
      }

      this.dom1 = echarts.init(this.$refs.dom1)
      this.dom1.setOption(option1)
      this.dom2 = echarts.init(this.$refs.dom2)
      this.dom2.setOption(option2)
      let myChart1 = this.dom1
      let myChart2 = this.dom2

      echarts.connect([myChart1,myChart2])
      on(window, 'resize', this.resize)

    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  },
}
</script>

<style scoped>

</style>
